
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="OptionBar.jsp" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/Index.css">
    <script src="${pageContext.request.contextPath}/js/ip.js"></script>
    <script src="${pageContext.request.contextPath}/js/Index.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/chplayer/chplayer.min.js"></script>
</head>
<body>

<div id="all">
    <div id="top_a">
        <div id="video"></div>
        <a  id = "top_b" href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=100001"><p>进入直播间</p></a>
    </div>
    <script type="text/javascript">
        var videoObject = {
            container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
            video: rtmpIp + '/300001' //视频地址
        };
        var player = new chplayer(videoObject);


    </script>
    <div id="all_a">
            <c:if test="${empty applicationScope.type6}">
                <script type="text/javascript">
                    window.location.href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByType"
                </script>
            </c:if>
        <%--热门--%>
        <div>
            <div class="top">
                <div><img src="${pageContext.request.contextPath}/images/f895ef20e8abcca83407b83537427573.png" alt="">
                </div>
                <p>热门</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type6}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}"><img
                                src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <%--最新--%>
        <div>
            <div class="top">
                <div id="icon1">
                </div>
                <p>最新</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type7}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <%--游戏--%>
        <div>
            <div class="top">
                <div><img src="${pageContext.request.contextPath}/images/5bf7f99667ca75f88c1db5e3fe484343.png" alt="">
                </div>
                <p>游戏</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type1}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <%--生活--%>
        <div>
            <div class="top">
                <div id="icon2">
                </div>
                <p>生活</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type2}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <%--科技--%>
        <div>
            <div class="top">
                <div><img src="${pageContext.request.contextPath}/images/4e6eff7d03e3b6c1ab228746a86265c1.png" alt="">
                </div>
                <p>科技</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type3}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>

            </ul>
        </div>
        <%--动漫--%>
        <div>
            <div class="top">
                <div><img src="${pageContext.request.contextPath}/images/6d1e73d1b4f71e4d9bcb69bbc24dd958.png" alt="">
                </div>
                <p>动漫</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type5}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <%--运动--%>
        <div>
            <div class="top">
                <div><img src="${pageContext.request.contextPath}/images/4bb4427731a0c43c7f26734d1cdb1a22.png" alt="">
                </div>
                <p>运动</p>
            </div>
            <ul class="img">
                <c:forEach items="${applicationScope.type4}" var="anchor">
                    <li>
                        <a href="${pageContext.request.contextPath}/anchorSearch?methodName=queryAnchorByRoomId&roomId=${anchor.roomId}">
                            <img src="${pageContext.request.contextPath}${anchor.roomImgUrl}"
                                                         alt=""></a>
                        <p>${anchor.roomName}</p>
                        <p>房间号：${anchor.roomId}</p>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
